<script lang="ts" setup>
import { getRuleListAPI } from "@/apis/car";
import type { Car, CarRuleRow } from "@/types/car";
import { reactive, ref } from "vue";
import { utils as xlsxUtils, writeFileXLSX } from "xlsx";

const ruleList = ref<CarRuleRow[]>([]);
const params = reactive({
  page: 1,
  pageSize: 10,
});
const total = ref(0);
const dialogVisible = ref(false);

const getList = async () => {
  // 获取所有规则数据
  const res = await getRuleListAPI(params);
  // 保存表格数据
  ruleList.value = res.data.rows;
  // 保存总数
  total.value = res.data.total;
};

getList();
// 收费类型，时长收费:duration, 按次收费:turn, 分段收费:partition
const chargeTypeMap: Record<string, string> = {
  duration: "时长收费",
  turn: "按次收费",
  partition: "分段收费",
};
// 导出 excel 测试
const testExportExcel = () => {
  // 1. 创建一个新的工作簿(文件)
  const workbook = xlsxUtils.book_new();
  // 2. 创建工作表，并把数据填充进去
  const worksheet = xlsxUtils.json_to_sheet([
    { name: "张三", age: 18 },
    { name: "李四", age: 28 },
  ]);
  // 3. 把工作表添加到工作簿中
  xlsxUtils.book_append_sheet(workbook, worksheet, "testSheet");
  // 改写表头，覆盖掉默认的 name, age 字段，覆盖的位置为 A1
  xlsxUtils.sheet_add_aoa(worksheet, [["姓名", "年龄"]], { origin: "A1" });
  // 4. 导出(下载) xlsx 文件
  writeFileXLSX(workbook, "test.xlsx");
};

// 把当前计费表格以 Excel 文件导出（下载）
const exportToExcel = () => {
  // 1. 创建一个新的工作簿(文件)
  const workbook = xlsxUtils.book_new();
  // 2. 创建工作表，并把数据填充进去
  const worksheet = xlsxUtils.json_to_sheet(
    ruleList.value.map((v, index) => ({
      ...v,
      id: index + 1,
      chargeType: chargeTypeMap[v.chargeType], // 换成中文
    }))
  );
  // 3. 把工作表添加到工作簿中
  xlsxUtils.book_append_sheet(workbook, worksheet, "计费规则");
  // 4. 改写表头，覆盖掉默认的 name, age 字段，覆盖的位置为 A1
  xlsxUtils.sheet_add_aoa(
    worksheet,
    [
      [
        "序号",
        "计费规则编号",
        "计费规则名称",
        "免费时长(分钟)",
        "收费上限(元)",
        "计费方式",
        "计费规则",
      ],
    ],
    { origin: "A1" }
  );

  // 5. 导出(下载) xlsx 文件
  writeFileXLSX(workbook, "计费规则.xlsx");
};
</script>

<template>
  <div class="rule-container">
    <div class="create-container">
      <el-button type="primary">增加停车计费规则</el-button>
      <el-button @click="exportToExcel">导出Excel</el-button>
      <el-button @click="testExportExcel">测试导出Excel</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table :data="ruleList" style="width: 100%">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column label="计费规则编号" prop="ruleNumber" />
        <el-table-column label="计费规则名称" prop="ruleName" />
        <el-table-column label="免费时长(分钟)" prop="freeDuration" />
        <el-table-column label="收费上限(元)" prop="chargeCeiling" />
        <el-table-column label="计费方式">
          <template #default="scope">
            {{ chargeTypeMap[scope.row.chargeType] }}
          </template>
        </el-table-column>
        <el-table-column label="计费规则" prop="ruleNameView" />
        <el-table-column label="操作" fixed="right" width="150">
          <template #default="scope">
            <el-button size="small" type="text">编辑</el-button>
            <el-button size="small" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.rule-container {
  padding: 20px;
  background-color: #fff;
}

.rules .el-form-item {
  padding: 0 10px;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, 0.9);
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}

.create-container {
  margin: 10px 0px;
}

.page-container {
  padding: 4px 0px;
  text-align: right;
}

.form-container {
  padding: 0px 80px;
}
</style>
